<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="">
			省份: 
			<select name="" id="provinceId" onchange="changeProvince();">
				<option value="-1">请选择省份</option>
			</select>
			城市: 
			<select name="" id="cityId" onchange="changeCity();">
				<option value="-1">请选择城市</option>
			</select>
			&nbsp;&nbsp;&nbsp;&nbsp;
			你选择的是： <label id="selectValue"></label>
		</div>
	</body>
	<script type="text/javascript">
		var  provinces =['北京市','上海市','福建省','广东省','浙江省'];
		provinces.push('江苏省')
		var citys = [
				['海淀区','朝阳区','丰台区'],
				['浦东区','嘉定区','宝山区'],
				['珠海市','深圳市','佛山市'],
				['福州市','厦门市','泉州市'],
				['杭州市','宁波市','温州市'],
				['南京市','无锡市','苏州市']
		];
		function changeProvince(){
			var provinceObj = document.getElementById('provinceId');
			var cityObj = document.getElementById('cityId');
			cityObj.innerHTML = `<option value="-1">请选择城市</option>`;
			if(provinceObj.value==-1){
				return;
			}
			var city = citys[provinceObj.value];			
			for(var i=0;i<city.length;i++){
				cityObj.innerHTML+=`<option value="`+i+`">`+city[i]+`</option>`;
			}
		}
		function changeCity(){
			var provinceObj = document.getElementById('provinceId');
			var cityObj = document.getElementById('cityId');
			var provinceName = provinces[provinceObj.value];
			var cityName = citys[provinceObj.value][cityObj.value];
		
			var selectObj = document.getElementById('selectValue');
			selectObj.innerText = provinceName+"-->"+cityName;
		}
		onload = function(){
			//添加省份
			var provinceObj = document.getElementById('provinceId');
			for(var i=0;i<provinces.length;i++){
				provinceObj.innerHTML+=`<option value="`+i+`">`+provinces[i]+`</option>`;
			}
			
		}
	</script>
</html>


